import React, { Component } from 'react'
import { connect } from 'react-redux'
import { RouteComponentProps } from 'react-router-dom'
import { hot } from 'react-hot-loader/root'
import { AppState } from '@stores/interface'
import IconSuccess from '@assets/svg/sucess.svg'
import { FILE_TYPES, FORMAT_A } from 'ad-ui-utils'
import { UserContext } from 'app/context'
import {
  Space,
  Row,
  Col,
  Spin,
  Button,
  Card,
  Divider,
  Typography,
  DatePicker,
  AutoComplete,
  Upload
} from 'antd'
import * as styles from './index.scss'
import moment from 'moment'
import { inject_component_will_unmount } from 'helper/decorator'
import { FormattedMessage } from 'react-intl'

const { Title } = Typography

const {
  findOrderById
} = Api.order

const {
  findBasicEnum,
  searchCountry,
} = Api.base

const mapStateToProps = (state: AppState) => {
  return ({
    order: state.get('order'),
  })
}

interface ISelectCountry {
  id: string
  [propName: string]: any
}

interface IState {
  loading_order: boolean
  resultFiles: ISelectCountry | null
  result: ISelectCountry | null
  guideVisible: boolean
}

type ReduxType = ReturnType<typeof mapStateToProps> & RouteComponentProps

@inject_component_will_unmount
class Home extends Component<ReduxType> {

  state: IState
  static contextType = UserContext

  constructor(props: ReduxType) {
    super(props)
    this.state = {
      loading_order: false,
      result: null,
      resultFiles: null,
      guideVisible: false,
    }
  }

  render() {
    const { history, order } = this.props
    const { result, resultFiles, loading_order } = this.state

    return (
      <div className={styles.container}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card title='多语言展示'>
              <Title level={4}><FormattedMessage id={'username'} values={{ name: 'HH' }} /></Title>
            </Card>
          </Col>
          <Col span={12}>
            <Card title='组件库' data-step="1" data-tip='Welcome to E-PORTS' style={{ overflowY: 'scroll' }}>
            </Card>
          </Col>
          <Col span={6}>
            <Card title='Time'>
              <DatePicker /><br />
              {moment().format(FORMAT_A)}
            </Card>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card title='其他页面' data-step="2" data-tip='E-PORTS is an online, B2B platform for the shipping industry, leading the charge in transforming this traditional industry. With the mission of providing “One-Click Access to World-Class Shipping Services”, E-PORTS endeavors to provide both online and offline world-class shipping services for vessels worldwide and to offer port service solutions to global merchant vessels.'>
              <Button onClick={() => { history.push('/404') }} type="primary">404</Button>
              <Divider type="vertical" />
              <Button onClick={() => { history.push('/500') }} type="primary">500</Button>
            </Card>
          </Col>
          <Col span={6}>
            <Card title='测试'>
              <Button onClick={this.handleClickGuide} type="primary">开始guide</Button>
            </Card>
          </Col>
          <Col span={6}>
            <Card title='获取数据'>
              <Space direction={'vertical'}>
                <Button onClick={this.handleClickList} type="primary" data-tour='second-step'>获取基础数据</Button>
                <Button onClick={this.handleClickOrder} type="primary" loading={loading_order}>获取订单数据</Button>
              </Space>
            </Card>
          </Col>
          <Col span={6}>
            <Card title='订单展示'>
              <Space direction={'vertical'}>
                {order && (
                  order.get('_loading_') ? <Spin /> : Object.keys(order.toJS()).map(key => <span key={key}>{String(order.get(key))}</span>)
                )}
              </Space>
            </Card>
          </Col>

        </Row>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card title='背景图片'>
              <div className={styles.background}></div>
            </Card>
          </Col>
          <Col span={6}>
            <Card title='SVG图标'>
              <img src={IconSuccess} width={160} />
            </Card>
          </Col>
          <Col span={6}>
            <Card title='上传组件'>

            </Card>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>

          </Col>
        </Row>
      </div>
    )
  }

  handleClickList = () => { findBasicEnum() }
  handleClickOrder = () => {
    this.setState({ loading_order: true })
    findOrderById({ orderId: '6ff78c5f567944e8aeb34ada80a6536c' }).then((res: any) => {
      if (res.response && res.response.id) {
        this.setState({ loading_order: false })
      }
    })
  }
  handleClickGuide = () => { this.setState({ guideVisible: true }) }
  handleSelect = (value: ISelectCountry) => { this.setState({ result: value }) }
  handleGuideCancel = () => { this.setState({ guideVisible: false }) }
  handlCallback = (value: any) => { this.setState({ resultFiles: value }) }
}
export default hot(connect(mapStateToProps)(Home))
